<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>login</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <script th:src="@{/js/jquery-3.3.1.js}" type="text/javascript"></script>
    <script th:src="@{/js/bootstrap.min.js}" type="text/javascript"></script>

    <style>
        .container{
            margin-top: 10%;
            height: 280px;
            width: 300px;
            border-radius: 5px;
            border:2px solid #DDDDDD;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12 column text-center">
            <h3 class="text-success text-left">力学性能范围查询：</h3>
        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-md-12 column">
            <form id="rangeQuery" role="form" action="/materials/materail/query" onsubmit="return submitFun();">
                <div class="form-group">
                    <label for="tensile_strength">抗拉强度范围：</label>
                    <div class="col-md-12" id="tensile_strength">
                        <div class="col-md-5 text-center">
                            <input type="text" name="MinTensileStrength" class="form-control"  placeholder="最小值"/>
                        </div>
                        <div class="col-md-2 text-center">
                            -
                        </div>
                        <div class="col-md-5 text-center">
                            <input type="text" name="MaxTensileStrength" class="form-control" placeholder="最大值" />
                        </div>
                    </div>
                </div>
                <hr/>
                <div class="form-group">
                    <label for="elongation_percentage">断后伸长率：</label>
                    <div class="col-md-12" id="elongation_percentage">
                        <div class="col-md-5 text-center">
                            <input type="text" name="MinElongationPercentage" class="form-control"  placeholder="最小值"/>
                        </div>
                        <div class="col-md-2 text-center">
                            -
                        </div>
                        <div class="col-md-5 text-center">
                            <input type="text" name="MaxElongationPercentage" class="form-control" placeholder="最大值" />
                        </div>
                    </div>
                </div>
                <hr/>
                <div class="form-group text-right">
                    <button type="submit" id="queryButton" class="btn btn-primary">查询</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>

        function submitFun() {
            //判断
            if (($("[name='MinTensileStrength']").val() == "" && $("[name='MaxTensileStrength']").val() != "") || ($("[name='MinTensileStrength']").val() != "" && $("[name='MaxTensileStrength']").val() == "")) {
                alert("请输入完整的抗拉强度范围！");
                $("[name='MinTensileStrength']").val("");
                $("[name='MaxTensileStrength']").val("");
                return false;
            }
            if (($("[name='MinElongationPercentage']").val() == "" && $("[name='MaxElongationPercentage']").val() != "") || ($("[name='MinElongationPercentage']").val() != "" && $("[name='MaxElongationPercentage']").val() == "")) {
                alert("请输入完整的断后伸长率范围！");
                $("[name='MinElongationPercentage']").val("");
                $("[name='MaxElongationPercentage']").val("");
                return false;
            }
            // $("#rangeQuery").setAttribute("action","/materials/materail/query");
            $("#rangeQuery").submit();
        }
        // $("#queryButton").click(function () {
        //     //判断
        //     if(($("[name='MinTensileStrength']").val() == "" && $("[name='MaxTensileStrength']").val() != "") || ($("[name='MinTensileStrength']").val() != "" && $("[name='MaxTensileStrength']").val() == "")){
        //         alert("请输入完整的抗拉强度范围！");
        //         $("[name='MinTensileStrength']").val("");
        //         $("[name='MaxTensileStrength']").val("");
        //         return;
        //     }
        //     if(($("[name='MinElongationPercentage']").val() == "" && $("[name='MaxElongationPercentage']").val() != "") || ($("[name='MinElongationPercentage']").val() != "" && $("[name='MaxElongationPercentage']").val() == "")){
        //         alert("请输入完整的断后伸长率范围！");
        //         $("[name='MinElongationPercentage']").val("");
        //         $("[name='MaxElongationPercentage']").val("");
        //         return;
        //     }
        //     $("#rangeQuery").setAttribute("action","/materials/materail/query");
        //     $("#rangeQuery").submit();
        // })
</script>
</body>
</html>